import React from 'react';
// import ReactPropTypes from 'prop-types';
import styles from './index.less';
import {
  Form,
  DatePicker,
  Button,
  Col,
  Input,
  Row,
  Select,
  Space,
  Radio,
} from 'antd';
import Utils from './utils';
import { DownOutlined } from '@ant-design/icons';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
class BasicFormS extends React.Component {
  // static propTypes = {
  //   formList: ReactPropTypes.array.isRequired, //限制必传，且为数组
  //   extendFormList: ReactPropTypes.array, //限制为数组
  //   expand: ReactPropTypes.bool, //限制为布尔值
  //   changeExpand: ReactPropTypes.func.isRequired, //限制必传，且为函数
  //   filterSubmit: ReactPropTypes.func.isRequired, //限制必传，且为函数
  // };
  static defaultProps = {
    formList: [],
    extendFormList: [],
    expand: false,
    changeExpand: () => {},
    filterSubmit: () => {},
  };

  state = {
    form: React.createRef(),
    showExpend: false,
  };

  componentDidMount() {
    const { formList, extendFormList } = this.props;
    if (formList?.length + extendFormList?.length <= 3) {
      this.setState({ showExpend: true });
    }
  }

  onFinish = value => {
    let fieldsValue = { ...value };
    Object.keys(value).forEach(key => {
      if (value[key] instanceof Array) {
        fieldsValue[key] = [
          Utils.formateDate(value[key][0]),
          Utils.formateDate(value[key][1]),
        ];
      }
    });
    this.props.filterSubmit(fieldsValue);
  };

  // reset = () => {
  //   this.state.form.resetFields();
  // };

  initFormList = () => {
    const formItemList = [];
    const { formList, extendFormList } = this.props;

    // 页面上的表单
    if (formList && formList.length > 0) {
      formList.forEach(item => {
        const {
          label,
          field,
          type,
          placeholder,
          width,
          name,
          radioValue,
        } = item;
        if (type === 'INPUT') {
          const INPUT = (
            <FormItem key={field} label={label} name={name}>
              <Input style={{ width }} placeholder={placeholder} />
            </FormItem>
          );
          formItemList.push(
            <Col span={8} key={Math.random()}>
              {INPUT}
            </Col>,
          );
        } else if (type === 'RANGEPICKER') {
          const RangePickerDate = (
            <FormItem label={label} key={field} name={name}>
              <RangePicker style={{ width }} format="YYYY-MM-DD" />
            </FormItem>
          );
          formItemList.push(
            <Col span={8} key={Math.random()}>
              {RangePickerDate}
            </Col>,
          );
        } else if (type === 'SELECT') {
          const SELECT = (
            <FormItem label={label} key={field} name={name}>
              <Select style={{ width }} placeholder={placeholder}>
                {Utils.getOptionList(item.list)}
              </Select>
            </FormItem>
          );
          formItemList.push(
            <Col span={8} key={Math.random()}>
              {SELECT}
            </Col>,
          );
        } else if (type === 'RADIO') {
          const RADIO = (
            <FormItem label={label} key={field} name={name}>
              <Radio.Group value={radioValue}>
                {Utils.getRadioList(item.list)}
              </Radio.Group>
            </FormItem>
          );
          formItemList.push(
            <Col span={8} key={Math.random()}>
              {RADIO}
            </Col>,
          );
        }
      });
    }
    // 展开的表单
    if (extendFormList && extendFormList.length > 0) {
      extendFormList.forEach(item => {
        const {
          label,
          field,
          type,
          placeholder,
          width,
          name,
          radioValue,
        } = item;
        if (type === 'RANGEPICKER') {
          const RangePickerDate = (
            <FormItem label={label} key={field} name={name}>
              <RangePicker style={{ width }} format="YYYY-MM-DD" />
            </FormItem>
          );

          if (this.props.expand === true || this.state.showExpend) {
            formItemList.push(
              <Col span={8} key={Math.random()}>
                {RangePickerDate}
              </Col>,
            );
          } else {
            formItemList.push([]);
          }
        } else if (type === 'INPUT') {
          const INPUT = (
            <FormItem label={label} key={field} name={name}>
              <Input type="text" placeholder={placeholder} style={{ width }} />
            </FormItem>
          );
          if (this.props.expand === true || this.state.showExpend) {
            formItemList.push(
              <Col span={8} key={Math.random()}>
                {INPUT}
              </Col>,
            );
          } else {
            formItemList.push([]);
          }
        } else if (type === 'SELECT') {
          const SELECT = (
            <FormItem label={label} key={field} name={name}>
              <Select style={{ width }} placeholder={placeholder}>
                {Utils.getOptionList(item.list, name)}
              </Select>
            </FormItem>
          );
          if (this.props.expand === true || this.state.showExpend) {
            formItemList.push(
              <Col span={8} key={Math.random()}>
                {SELECT}
              </Col>,
            );
          }
        } else if (type === 'RADIO') {
          const RADIO = (
            <FormItem label={label} key={field} name={name}>
              <Radio.Group value={radioValue}>
                {Utils.getRadioList(item.list)}
              </Radio.Group>
            </FormItem>
          );

          if (this.props.expand === true || this.state.showExpend) {
            formItemList.push(
              <Col span={8} key={Math.random()}>
                {RADIO}
              </Col>,
            );
          }
        } else {
          formItemList.push([]);
        }
      });
    }

    return formItemList;
  };

  render() {
    return (
      <div className={styles.page}>
        <Form
          ref={this.state.form}
          name="basic_form"
          style={{ maxWidth: 'none', padding: '0px 24px 16px ' }}
          onFinish={this.onFinish}
        >
          <Row gutter={16}> {this.initFormList()}</Row>
          <div
            style={{
              textAlign: 'right',
            }}
          >
            <Space size="small">
              <Button htmlType="reset">重置</Button>

              <Button type="primary" htmlType="filterSubmit">
                查询
              </Button>

              {!this.state.showExpend && (
                <a
                  style={{
                    fontSize: 12,
                  }}
                  onClick={this.props.changeExpand}
                >
                  <span>
                    {this.props.extendFormList?.length > 0 &&
                    this.props.expand === false
                      ? '展开'
                      : '收起'}
                  </span>
                  <DownOutlined rotate={this.props.expand ? 180 : 0} />
                </a>
              )}
            </Space>
          </div>
        </Form>
      </div>
    );
  }
}
export default BasicFormS;
